<template>
	<view>
		<page-head :pageTitle="pageTitle"></page-head>
		<view class="container">
			<view class="coupon_tab" :style="{top: statusBarHeight + 44 +'px;'}">
				<view class="classlist">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="width: 100%">
						<block v-for="item in classList" :key="item">
							<view :class="['item', curType==item.type?'on':'']" @tap="switchTab(item.type)">
								{{item.name}}
								<text>({{coupons[item.type].length}})</text>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
			<view class="coupon_tabH"></view>
			<scroll-view scroll-y style="padding-bottom: 30rpx;">
				<view class="comp">
					<view class="act_content">
						<mine-coupon :coupon="coupons[curType]" :cur-type="curType" @refresh="initPage"></mine-coupon>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import couponModel from '../../model/coupon'
	import mineCoupon from "../../components/coupon/minecoupon"
	export default {
		data() {
			return {
				pageTitle: '我的券',
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				coupons: {
					V: [],
					U: [],
					O: []
				},
				curType: 'V',
				classList: [{
					type: 'V',
					name: '未使用'
				}, {
					type: 'U',
					name: '已使用'
				}, {
					type: 'O',
					name: '已过期'
				}],
				height: 200,
				windowHeight: '',
				showBottom: false
			}
		},
		components: {
			mineCoupon
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					var clientHeight = res.windowHeight,
						clientWidth = res.windowWidth,
						rpxR = 750 / clientWidth;
					let calc = clientHeight * rpxR;
					that.windowHeight = calc
					that.height = calc - 248
				}
			})
		},
		onShow() {
			this.initPage()
		},
		methods: {
			switchTab(val) {
				this.curType = val				
			},
			initPage() {
				this.$api.wxApi.couponList().then(res => {
					let couponObj = couponModel.MyCoupon.parse(res.data.coupon)
					this.coupons.V = couponObj.valid
					this.coupons.U = couponObj.used
					this.coupons.O = couponObj.expired
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {
		background: #f7f7f7;
	}

	.coupon_tab {
		position: fixed;
		left: 0;
		width: 100%;
		height: 98rpx;
		z-index: 8888;
	}

	.coupon_tabH {
		font-size: 0px;
		line-height: 999rpx;
		overflow: hidden;
		height: 98rpx;
	}

	.classlist {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		background: #fff;
	}

	.classlist .item {
		color: #B2B2B2;
		width: 33.3%;
		text-align: center;
		display: inline-block;
		height: 90rpx;
		font-size: 32rpx;
		line-height: 90rpx;
	}

	.classlist .item.on {
		color: #5A5A5A;
		position: relative;
	}

	.classlist .item.on:after {
		position: absolute;
		content: ' ';
		top: 90%;
		left: 50%;
		width: 128rpx;
		height: 6rpx;
		background: -webkit-linear-gradient(top, #FC893C, #FF7E1A);
		background: linear-gradient(top, #FC893C, #FF7E1A);
		border-radius: 6rpx;
		margin-left: -64rpx;
	}

	.comp {
		padding: 0 30rpx;
		background: #f1f1f1;
	}

	.act_content {
		width: 100%;
		display: block;
		padding-bottom: 20rpx;
	}
</style>
